<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/template.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div style="width: 95%; margin: auto" id="childApp">
    <div class=" mt-4 col " style="font-size: 24px">
        Selection control
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-4 p-0">
                <div class=" mb-4 " style="width: 100%">
                    <div class="col-12 d-flex">
                        <div class="col-4 p-0">
                            <label class="unis-switch ">
                                <input type="checkbox" name="switch" checked>
                                <div class="unis-switch-style"></div>
                                <span></span>
                            </label>
                        </div>
                        <div class="col-6">Toggle /on default</div>

                    </div>
                    <div class="col-12 d-flex mt-3">
                        <div class="col-4 p-0">
                            <label class="unis-switch">
                                <input type="checkbox" name="switch">
                                <div class="unis-switch-style"></div>
                                <span></span>
                            </label>
                        </div>
                        <div class="col-6">Toggle/off</div>

                    </div>
                    <div class="col-12 d-flex mt-3">
                        <div class="col-4 p-0">
                            <label class="unis-switch">
                                <input type="checkbox" name="switch" disabled>
                                <div class="unis-switch-style"></div>
                                <span></span>
                            </label>
                        </div>
                        <div class="col-6">Toggle/disabled</div>

                    </div>
                    <div class="col-12 d-flex mt-3">
                        <div class="col-4 p-0">
                            <label class="unis-switch">
                                <input type="checkbox" name="switch" checked="" disabled="">
                                <div class="unis-switch-style"></div>
                                <span></span>
                            </label>
                        </div>
                        <div class="col-6">Toggle/ On Disabled</div>

                    </div>

                </div>
            </div>
            <div class="col-6 p-0 d-flex ">
                <div class=" mb-4 " style="width: 100%">
                    <div class="col-12 d-flex">
                        <div class="col-3 p-0">
                            <label class="unis-switch large">
                                <input type="checkbox" name="switch" checked>
                                <div class="unis-switch-style"></div>
                                <span> </span>
                            </label>
                        </div>
                        <div class="col-2 " >Large</div>

                    </div>
                </div>
            </div>

        </template>
        <template v-slot:htmcode>
            <label class="unis-switch">
                <input type="checkbox" name="switch">
                <div class="unis-switch-style"></div>
                <span></span>
            </label>
            <label class="unis-switch">
                <input type="checkbox" name="switch" checked>
                <div class="unis-switch-style"></div>
                <span></span>
            </label>
            <label class="unis-switch">
                <input type="checkbox" name="switch" checked="" disabled="">
                <div class="unis-switch-style"></div>
                <span></span>
            </label>

            <label class="unis-switch large">
                <input type="checkbox" name="switch" checked>
                <div class="unis-switch-style"></div>
                <span> Large</span>
            </label>
        </template>
    </dfault-vuew>
    <div class=" mt-4 col  " style="font-size: 24px; margin-top: 80px;">
        Checkbox
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="   mb-4" style="width: 100%">
                <div class="col-12 d-flex ">
                    <div class="col-3 p-0">
                        <input class="unis-checkbox" type="checkbox" name="layout" id="cd1">
                        <label for="cd1">
                        </label>
                    </div>
                    <div class="col-2">Checkbox default</div>

                </div>
                <div class="col-12 d-flex mt-3 ">
                    <div class="col-3 p-0">
                        <input class="unis-checkbox" type="checkbox" checked name="layouts" id="cd2">
                        <label for="cd2">

                        </label>
                    </div>
                    <div class="col-2">checked</div>

                </div>
                <div class="col-12 d-flex mt-3 ">
                    <div class="col-3 p-0">
                        <input class="unis-checkbox" error="" type="checkbox" name="layout"
                               id="cd4sss">
                        <label for="cd4sss">
                        </label></div>
                    <div class="col-2">Error</div>

                </div>
                <div class="col-12 d-flex mt-3 ">
                    <div class="col-3 p-0">
                        <input class="unis-checkbox" disabled type="checkbox" name="layout" id="cd3">
                        <label for="cd3">

                        </label>
                    </div>
                    <div class="col-2">Disabled</div>

                </div>
                <div class="col-12 d-flex mt-3 ">
                    <div class="col-3 p-0"><input class="unis-checkbox" disabled checked type="checkbox" name="layout"
                                                  id="cd4">
                        <label for="cd4">

                        </label></div>
                    <div class="col-2">Checked Disabled</div>

                </div>
                <div class="col-12 d-flex mt-3 ">
                    <div class="col-3 p-0"><input class="unis-ridurre" type="checkbox" name="layout"
                                                  id="cd4s">
                        <label for="cd4s">

                        </label></div>
                    <div class="col-2">Checked  </div>

                </div>

                <div class="col-12 d-flex mt-3 ">
                    <div class="col-3 p-0"><input class="unis-ridurre" disabled checked type="checkbox" name="layout"
                                                  id="cdee">
                        <label for="cdee">

                        </label></div>
                    <div class="col-2">Checked Disabled</div>

                </div>

            </div>

        </template>
        <template v-slot:htmcode>
            <input class="unis-checkbox" type="checkbox" name="layout" id="c1">
            <label for="c1">

            </label>
            <input class="unis-checkbox" type="checkbox" checked name="layouts" id="cd2s">
            <label for="cd2s">

            </label>
            <input class="unis-checkbox" disabled type="checkbox" name="layoutr" id="cdr3">
            <label for="cdr3">

            </label>
            <div class="col-3 p-0"><input class="unis-ridurre" type="checkbox" name="layout"
                                          id="cd4ss">
                <label for="cd4ss">

                </label></div>
            <div class="col-2">Checked </div>
            <div class="col-3 p-0"><input class="unis-ridurre" disabled type="checkbox" name="layout"
                                          id="cd4as">
                <label for="cd4as">

                </label></div>
            <div class="col-2">Checked Disabled</div>
        </template>
    </dfault-vuew>
    <div class=" mt-4  col" style="font-size: 24px; margin-top: 80px;">
        Radio button
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class=" mb-4" style="width: 100%">
                <div class="col-12 d-flex p-0">
                    <div class="col-3">
                        <input class="unis-radio" type="radio" name="radio" id="r1" value="option1">
                        <label for="r1">
                        </label>
                    </div>
                    <div class="col-2">Default</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <input class="unis-radio" type="radio" name="radio" id="r2" value="option2" checked="true">
                        <label for="r2">

                        </label>
                    </div>
                    <div class="col-2">Selected</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <input class="unis-radio" type="radio" name="radio" id="r3" value="option3" disabled="">
                        <label for="r3">

                        </label>
                    </div>
                    <div class="col-2">Disabled-unfilled</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <input class="unis-radio" type="radio" name="radio3" id="r4" value="option4" disabled=""
                               checked="true">
                        <label for="r4"></label>
                    </div>
                    <div class="col-2">Disabled Selected</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <input class="unis-radio" error="" type="radio" name="radio3" id="r4error" value="option4">
                        <label for="r4error"></label>
                    </div>
                    <div class="col-2">Error</div>
                </div>

            </div>

        </template>
        <template v-slot:htmcode>
            <input class="unis-radio" type="radio" name="radio" id="rd1" value="option1">
            <label for="rd1">
                <span class="pl-3_5">Radio</span>
            </label>
            <input class="unis-radio" type="radio" name="radio2" id="rd1s" value="option1" checked="true">
            <label for="rd1s">
                <span class="pl-3_5">Checked</span>
            </label>
            <input class="unis-radio" type="radio" name="radio23" id="rd13" value="option1" disabled=""
                   checked="true">
            <label for="rd13">
                <span class="pl-3_5">Disabled Checked</span>
            </label>
        </template>
    </dfault-vuew>

    <dfault-vuew>
        <template v-slot:htm>
            <div class=" mb-4" style="width: 100%">
                <div class="col-12 d-flex p-0">
                    <div class="col-8">
                        <div class="unis-blick-btn ">
                            <div class="mr-4 ml-3 ">
                                <input type="radio" name="radiobtn" id="blickbtn1" value="option1" class="unis-radio">
                                <label for="blickbtn1">
                                </label>
                            </div>
                            <span>Title</span>
                        </div>

                    </div>
                    <div class="col-2">Default</div>
                </div>
                <div class="col-12 d-flex p-0 mt-4">
                    <div class="col-8">
                        <div class="unis-blick-btn  br-themePressed br-1">
                            <div class="mr-4 ml-3  ">
                                <input type="radio" name="radiobtn" checked id="blickbtn2" value="option1"
                                       class="unis-radio">
                                <label for="blickbtn2">
                                </label>
                            </div>
                            <span>Title</span>
                        </div>

                    </div>
                    <div class="col-2">Pressed</div>
                </div>

            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-blick-btn ">
                <div class="mr-4 ml-3 bg-selectionIcon">
                    <input type="radio" name="radioblick" id="btn1s" value="option1" class="unis-radio">
                    <label for="btn1s">
                    </label>
                </div>
                <span>Title</span>
            </div>
            <div class="unis-blick-btn  br-themePressed br-1">
                <div class="mr-4 ml-3 bg-selectionIcon ">
                    <input type="radio" name="radioblick " checked id="blick" value="option1" class="unis-radio">
                    <label for="blick">
                    </label>
                </div>
                <span>Title</span>
            </div>
        </template>
    </dfault-vuew>

    <div class=" mt-4  col" style="font-size: 24px;margin-top: 80px;">
        single selection button- functions similar to radio button
    </div>

    <dfault-vuew>
        <template v-slot:htm>
            <div class="col-4 p-0">
                <div class="  mb-4" style="width: 100%">
                    <div class="col-12 mb-4">&nbsp;</div>
                    <div class="col-12 d-flex p-0">
                        <div class="col d-flex ">
                            <div class="unis-bl-radio-box  mr-3 ">
                                <input type="radio"   checked="true" name="radio8" id="001"
                                       value="option1">
                                <label for="001">Selection</label>
                            </div>
                            <div class="unis-bl-radio-box ">
                                <input type="radio"   name="radio8" id="002" value="option1">
                                <label for="002">Selection</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 d-flex p-0 mt-4">
                        <div class="col d-flex ">
                            <div class="unis-bl-radio-box  mr-3">
                                <input type="radio"   name="radio5" id="003" value="option1">
                                <label for="003">Selection</label>
                            </div>
                            <div class="unis-bl-radio-box ">
                                <input type="radio" checked="true" name="radio5" id="004"
                                       value="option1">
                                <label for="004">Selection</label>
                            </div>
                        </div>

                    </div>


                </div>
            </div>
            <div class="col-4 p-0" style="width: 100%">
                <div class="col-12 d-flex p-0 flex-wrap">
                    <div class="col-12 mb-4">Compact</div>
                    <div class="col d-flex ">
                        <div class="unis-bl-radio-box mr-3">
                            <input type="radio" checked="true" class="compact" name="radioe8" id="s006" value="option1">
                            <label for="s006">Selection</label>
                        </div>
                    </div>
                </div>


            </div>


        </template>
        <template v-slot:htmcode>
            <div class="unis-bl-radio-box mr-3">
                <input type="radio" checked="true" class="" name="radio8" id="rc5" value="option1">
                <label for="rc5">Selection</label>
            </div>
            <div class="unis-bl-radio-box">
                <input type="radio" name="radio8"  id="rcd5" value="option1">
                <label for="rcd5">Selection</label>
            </div>
            <div class="col-12 mb-4">Compact</div>
            <div class="col d-flex ">
                <div class="unis-bl-radio-box mr-3">
                    <input type="radio" checked="true" class="compact" name="radioe8" id="s006" value="option1">
                    <label for="s006">Selection</label>
                </div>
            </div>
        </template>
    </dfault-vuew>


    <div class=" mt-4 p-0 col" style="font-size: 24px;margin-top: 80px;">
        Stepper
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="  mb-4" style="width: 100%">
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <div class="unis-stepper">
                            <button disabled="">
                                <i class="icon-31"></i>
                            </button>
                            <span>0</span>
                            <button disabled="">
                                <i class="icon-32"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-2">Default</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <div class="unis-stepper">
                            <button disabled="">
                                <i class="icon-31"></i>
                            </button>
                            <span>1</span>
                            <button>
                                <i class="icon-32"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-2">Minimum</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <div class="unis-stepper">
                            <button>
                                <i class="icon-31"></i>
                            </button>
                            <span>2</span>
                            <button>
                                <i class="icon-32"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-2">Max (1 figure)</div>
                </div>
                <div class="col-12 d-flex mt-3 p-0">
                    <div class="col-3">
                        <div class="unis-stepper">
                            <button>
                                <i class="icon-31"></i>
                            </button>
                            <span>8</span>
                            <button disabled="">
                                <i class="icon-32"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-2">Max (2 figures)</div>
                </div>


            </div>

        </template>
        <template v-slot:htmcode>
            <div class="unis-stepper">
                <button disabled="">
                    <i class="icon-31"></i>
                </button>
                <span>0</span>
                <button disabled="">
                    <i class="icon-32"></i>
                </button>
            </div>
            <div class="unis-stepper">
                <button disabled="">
                    <i class="icon-31"></i>
                </button>
                <span>1</span>
                <button>
                    <i class="icon-32"></i>
                </button>
            </div>
            <div class="unis-stepper">
                <button>
                    <i class="icon-31"></i>
                </button>
                <span>2</span>
                <button>
                    <i class="icon-32"></i>
                </button>
            </div>
            <div class="unis-stepper">
                <button>
                    <i class="icon-31"></i>
                </button>
                <span>8</span>
                <button disabled="">
                    <i class="icon-32"></i>
                </button>
            </div>
        </template>
    </dfault-vuew>
    <div class=" mt-4 p-0 col" style="font-size: 24px;margin-top: 80px;">
        Progress indicator
    </div>
    <div class=" mt-4 p-0 col" style="font-size: 20px;margin-top: 30px;">
        Vertical
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex col" style="width: 100%;">
                <div class="d-flex flex-column ">

                    <div class="step-complete completa " style="min-height: 110px;">
                        <div class="step-box  flex-column">
                            <div class="empty-box">
                                <div class="step">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4 f-b ">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-complete" style="min-height: 110px;">
                        <div class="step-box  flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-complete">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                        </div>
                        <div class=" title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column" style="margin-left: 150px;">
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box  flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-complete">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                        </div>
                        <div class=" title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column" style="margin-left: 150px;">
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete completa">
                        <div class="step-box  flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                        </div>
                        <div class=" title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <div class="d-flex col" style="width: 100%;">
                <div class="d-flex flex-column ">

                    <div class="step-complete completa " style="min-height: 110px;">
                        <div class="step-box  flex-column">
                            <div class="empty-box">
                                <div class="step">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4 f-b ">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-complete" style="min-height: 110px;">
                        <div class="step-box  flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-complete">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                        </div>
                        <div class=" title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column" style="margin-left: 150px;">
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box  flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="step-complete">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                        </div>
                        <div class=" title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column" style="margin-left: 150px;">
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete completa" style="min-height: 110px;">
                        <div class="step-box flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title m-2 ml-4  f-b">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete completa">
                        <div class="step-box  flex-column">
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                        </div>
                        <div class=" title m-2 ml-4  f-b">
                            <div style="position: relative;">
                                <div>Current Step
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </dfault-vuew>

    <div class=" mt-4 p-0 col" style="font-size: 20px;margin-top: 30px;">
        Horizontal
    </div>
    <dfault-vuew>
        <template v-slot:htm>
            <div class="d-flex " style="width: 100%;">
                <div class=" d-flex ">
                    <div class="step-complete completa flex-column justify-content-center">
                        <div class="step-box" style="width: 150px">
                            <div class="top-line en-es-line"></div>
                            <div class="empty-box  ">
                                <div class="step  ">1</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title ft-aLink mt-2 f-b t-center">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete flex-column">
                        <div class="step-box" style="width: 150px">
                            <div class="top-line "></div>
                            <div class="empty-box  ">
                                <div class="step  ">2</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title  mt-2 f-b t-center">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete flex-column">
                        <div class="step-box" style="width: 150px">
                            <div class="top-line "></div>
                            <div class="empty-box  ">
                                <div class="step  ">3</div>
                            </div>
                            <div class="line "></div>
                        </div>
                        <div class="title mt-2 f-b t-center">
                            Current Step
                        </div>
                    </div>
                    <div class="step-complete flex-column">
                        <div class="step-box" style="width: 150px">
                            <div class="top-line "></div>
                            <div class="empty-box  ">
                                <div class="step  ">4</div>
                            </div>
                            <div class="line en-es-line"></div>
                        </div>
                        <div class="title mt-2 f-b t-center">
                            Current Step
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-slot:htmcode>
            <div class=" d-flex ">
                <div class="step-complete completa flex-column justify-content-center">
                    <div class="step-box" style="width: 150px">
                        <div class="top-line first-top-line"></div>
                        <div class="empty-box  ">
                            <div class="step  ">1</div>
                        </div>
                        <div class="line "></div>
                    </div>
                    <div class="title ft-aLink mt-2 f-b t-center">
                        Current Step
                    </div>
                </div>
                <div class="step-complete flex-column">
                    <div class="step-box" style="width: 150px">
                        <div class="top-line "></div>
                        <div class="empty-box  ">
                            <div class="step  ">2</div>
                        </div>
                        <div class="line "></div>
                    </div>
                    <div class="title  mt-2 f-b t-center">
                        Current Step
                    </div>
                </div>
                <div class="step-complete flex-column">
                    <div class="step-box" style="width: 150px">
                        <div class="top-line "></div>
                        <div class="empty-box  ">
                            <div class="step  ">3</div>
                        </div>
                        <div class="line "></div>
                    </div>
                    <div class="title mt-2 f-b t-center">
                        Current Step
                    </div>
                </div>
                <div class="step-complete flex-column">
                    <div class="step-box" style="width: 150px">
                        <div class="top-line "></div>
                        <div class="empty-box  ">
                            <div class="step  ">4</div>
                        </div>
                        <div class="line"></div>
                    </div>
                    <div class="title mt-2 f-b t-center">
                        Current Step
                    </div>
                </div>
            </div>
        </template>
    </dfault-vuew>
    <div class="" style="height: 158px"></div>


</div>

<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
  var components = {
    template: dfaulthtml,
    props: {
      layout: {
        default: 1,
      }
    },
    data: function () {
      return {
        idShowCode: false,
        codeHtml: ''
      }
    },
    beforeCreate(){
      pageBeforeCreate();
    },
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },
  };
  new Vue({
    el: "#childApp",
    components: {'DfaultVuew': components},
    data: function () {
      return {
        idShowCode: false
      };
    },
    computed: {},
    methods: {
      showCode: function () {
        this.idShowCode = !this.idShowCode;
      }
    },

  });
</script>
<script src="../js/cods.js"></script>
</body>
</html>